<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX请求JSON</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>
<body>
部门：<select name="dept" id='dept'>
     <option value=0 >请选择</option>
</select>
名称：<input typye='text' id='key'/>
<div id="app">

    <table>
        <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>性别</th>
            <th>科组</th>
            <th>身份证</th>
            <th>住址</th>
            <th>工资</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="emp in this.emps">
            <td>[[ emp.id ]]</td>
            <td>[[ emp.name ]]</td>
            <td>[[ emp.gender ]]</td>
            <td>[[ emp.job ]]</td>
            <td>[[ emp.idcard ]]</td>
            <td>[[ emp.address ]]</td>
            <td>[[ emp.salary ]]</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            emps: [],
        },
        delimiters: ['[[', ']]'],
        created() {
            fetch('/app/emps').then(resp => {
                return resp.json() // {return resp.json()} ｛｝内缺return 会没有返回值
            })
                .then(json => {
                    console.log(json)
                    this.emps = json
                }, err => {
                    console.log('Error')
                });
        },
    });
</script>